<template>
  <PageWrapper dense contentClass="p-16px">
    <baseInfoEdit ref="baseInfoEditRef" />
    <printEdit ref="printEditRef" />
    <transportEdit ref="transportEditRef" />
    <priceEdit ref="priceEditRef" />
    <imageEdit ref="imageEditRef" />
    <div class="flex justify-end gap-8px mt-8px">
      <a-button @click="handleCancel">取消</a-button>
      <a-button type="primary" @click="handleSubmit(false)">保存</a-button>
    </div>
  </PageWrapper>
</template>

<script setup lang="ts">
  import { onMounted, ref, reactive } from 'vue';
  import { addProduct, updateProduct, getProduct } from '@/api/product';
  import { PageWrapper } from '@/components/Page';
  import baseInfoEdit from './components/baseInfoEdit.vue';
  import printEdit from './components/printEdit.vue';
  import transportEdit from './components/transportEdit.vue';
  import priceEdit from './components/priceEdit.vue';
  import imageEdit from './components/imageEdit.vue';
  import { useTabs } from '@/hooks/web/useTabs';
  import { useGo } from '@/hooks/web/usePage';
  import { PageEnum } from '@/enums/pageEnum';
  import { useRoute } from 'vue-router';

  defineOptions({ name: 'ProductEdit' });
  const { closeCurrent, setTitle } = useTabs();
  /** 拿到路由的id */
  const route = useRoute();
  const isUpdate = (route.query.type as string) === 'update';
  const productId = route.query.id as string;
  document.title = isUpdate ? '编辑产品' : '新增产品';
  setTitle(document.title);
  const go = useGo();
  const baseInfoEditRef = ref();
  const printEditRef = ref();
  const transportEditRef = ref();
  const priceEditRef = ref();
  const imageEditRef = ref();
  async function handleSubmit(flag: boolean) {
    const baseInfoEditData = await baseInfoEditRef.value?.handleSubmit();
    const printEditData = await printEditRef.value?.handleSubmit();
    const transportEditData = await transportEditRef.value?.handleSubmit();
    const priceEditData = await priceEditRef.value?.handleSubmit();
    const imageEditData = await imageEditRef.value?.handleSubmit();
    if (
      !baseInfoEditData ||
      !printEditData ||
      !transportEditData ||
      !priceEditData ||
      !imageEditData
    )
      return;
    try {
      const data = {
        ...baseInfoEditData,
        skuBo: {
          ...printEditData,
          ...transportEditData,
          ...priceEditData,
        },
        priceList: priceEditData.priceList,
      };
      if (isUpdate) {
        await updateProduct(data);
      } else {
        (await addProduct(data)) as any;
      }
      if (flag) {
      } else {
        handleCancel();
      }
    } catch (e) {
      console.log('e', e);
    } finally {
    }
  }
  async function handleCancel() {
    closeCurrent();
    go({ path: '/product/product' as PageEnum });
  }
  const getSpuInfo = async () => {
    const res = (await getProduct(productId)) as any;
    baseInfoEditRef.value?.setFormData(res);
    printEditRef.value?.setFormData(res.productSkuVo);
    priceEditRef.value?.setFormData({
      priceCodeId: res.productSkuVo.priceCodeId,
      plateCost: res.productSkuVo.plateCost,
      plateCostUnitId: res.productSkuVo.plateCostUnitId,
      priceList: res.priceVoList,
    });
    transportEditRef.value?.setFormData(res.productSkuVo);
  };
  onMounted(() => {
    productId && getSpuInfo();
  });
</script>
